<template>
	<div>
		<div class="container">
			<div class="handle-box">
                <el-text class="mx-1">批量操作</el-text>
                <el-input
    v-model="data.text"
    :autosize="{ minRows: 16, maxRows: 4 }"
    type="textarea"
    placeholder="格式：每行一个"
  />
				<el-select v-model="data.softwarelist_name" placeholder="软件" class="handle-select mr10"  @change="softwareChange">
					<el-option v-for="item in data.softwarelist" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
				</el-select>
                <el-select v-model="data.cxlist_name" placeholder="查询" class="handle-select mr10"  @change="cxChange">
					<el-option v-for="item in data.cxlist" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
				</el-select>
                <el-select v-model="data.now_name" placeholder="地址" class="handle-select mr10"  @change="systemFlagChange">
					<el-option v-for="item in data.systemFlags" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
				</el-select>
				<el-button type="primary" :icon="Search" @click="handleSearch">执行</el-button>
                <el-input
    v-model="data.textarea"
    :autosize="{ minRows: 16, maxRows: 4 }"
    type="textarea"
    placeholder=""
  />
			</div>
		</div>

	</div>
</template>

<script setup lang="ts" name="basetable">

import addMenuPage from "./components/addtable.vue";
import { CirclePlus } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { softwaredata,blacklistdata} from '../../api/index';
// 引入day.js
import dayjs from 'dayjs'

// 方法中-时间戳转时间
const formatTime = (rowtime: any,column: any) => {
  var date = rowtime[column.property];
//   console.log(column.property)
  if (date == undefined) {
    return '';
  }
  date = Number(date+'000');
//   console.log(typeof date)
  return dayjs(date).format('YYYY-MM-DD')
}

const addMenu = ref(); //ref方法是让我们的简单类型数据变成响应式数据；在方法里改变时需要.value来获取



interface User {
		id: string;
        addtime: string;
        status: string;
        ip: string;
        remark: string;
        software: string;
		
       
     
    }

    // reactive 数据双向绑定；让我们的复杂类型数据变成响应式数据；不需要.value来获取
    const data = reactive({
        text:"",
        textarea:"",
        dataText: "", //表格开始置空
        dataCount: 0, //共几条
        pageSize: 10, // 每页显示多少条
        curPage: 1, //第几页
        now_name: "",
        cxlist_name:"",
        softwarelist_name:"",

		name: "",
        softwarelist:"",
       
        systemFlags: [{
            name: '卡密操作',
            id: 'war'
        }, {
            name: '用户操作',
            id: 'pollution'
        }],
        cxlist: [{
            name: '查询',
            id: '1'
        }, {
            name: '封停',
            id: '2'
        }, {
            name: '深封',
            id: '3'
        }, {
            name: '解封',
            id: '4'
        }, {
            name: '解绑',
            id: '5'
        }, {
            name: '删除',
            id: '6'
        }, {
            name: '加时',
            id: '7'
        }, {
            name: '减时',
            id: '8'
        }],
        historyData: [], //回显到表格的数据
        small: false,
    });
    // small:false
    //获取初始数据
    onMounted(async () => {
        await getAllListLink();

        getAllDatas();


        if (localStorage.getItem("systemFlag") == undefined) {
            data.now_name = data.systemFlags[0].name;
        } else {
            data.now_name = localStorage.getItem("systemFlag") || '';
        };
       
        if (localStorage.getItem("softwareFlag") == undefined) {
          
            data.softwarelist_name = data.softwarelist[0].name;
        } else {
            data.softwarelist_name = localStorage.getItem("softwareFlag") || '';
        };

        if (localStorage.getItem("cxFlag") == undefined) {
            data.cxlist_name = data.cxlist[0].name;
        } else {
            data.cxlist_name = localStorage.getItem("cxFlag") || '';
        };
      
    });
    const systemFlagChange = (val: any) => {
        localStorage.setItem("systemFlag", val)
    };
    // 查询软件
        const softwareChange = (val: any) => {
        localStorage.setItem("softwareFlag", val)
    };
        // 查询类型
        const cxChange = (val: any) => {
        localStorage.setItem("cxFlag", val)
    };
    //表格初始查询
    const getAllDatas = () => {
        data.dataText = "";
        data.historyData = [];
        data.curPage = 1;
        // getAllListLink();
    };
	   const getguiling = () => {
		localStorage.setItem("systemFlag", '')
		let data ={
			now_name: "",//搜索框运行完归零。清空
		}
		let params = {
            systemFlag: '',//搜索框清空
        }
	   }
    //获取表格列表数据
    const getAllListLink = async () => {
        let params = {
			action:'apiall',
        }
        const res = await softwaredata(params);
        console.log(res);
        console.log(res.status);
                if (res.status == 200) {
                data.softwarelist = res.data.data
                console.log(data.softwarelist);
                // console.log(data.softwarelist);
            } else if (res.status !== 200) {
                data.dataText = "暂无数据";
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        // .then(res => {
		// 	// console.log(res);
		
        //     if (res.status == 200) {
        //         data.softwarelist = res.data.data
        //         console.log(data.softwarelist);
        //         // console.log(data.softwarelist);
        //     } else if (res.status !== 200) {
        //         data.dataText = "暂无数据";
        //         ElMessage({
        //             showClose: true,
        //             message: res.statusText,
        //             type: 'error',
        //         })
        //     }
        // })
    };
    //分页改变
    const changepage = (index: number) => {
        data.curPage = index;
        getAllListLink();
    };
    //每页条数切换
    const handleSizeChange = (val: number) => {
        // data.curPage = 1;
        data.pageSize = val;
        getAllListLink();
    };
	    //当前页数切换
	    const handleCurrentChange = (val: number) => {
        data.curPage = val;
        // data.pageSize = 10;
        getAllListLink();
    };

    //删除-接口
    const deleteCommon = (idnex: number,row: User) => {
        let params = {
			action:'apidel',
            id: row.id
        }

        blacklistdata(params).then(res => {
			console.log(res)
			    if (res.status == 200) {
                    ElMessage({
                        showClose: true,
                        message: '操作成功',
                        type: 'success',
                    })
                    getAllDatas();
                } else if (res.status !== 200) {
                    ElMessage({
                        showClose: true,
                        message: res.data.msg,
                        type: 'error',
                    })
                }
            })
    };
    //添加
    const addRole = () => {
        addMenu.value.addItemShow(data.now_name)
    };
    //编辑
    const handleClick = (index: number, row: any) => {
        addMenu.value.addItemShow2(row, data.now_name)
    };

//参考 https://blog.csdn.net/Hei_lovely_cat/article/details/126105403

// const tableData = ref<TableItem[]>([]);
// const pageTotal = ref(0);
// 获取表格数据
// 查询操作
const handleSearch = () => {
    let params = {
			action:'apiget',
            softwarelist_name:data.softwarelist_name,
            cxlist_name:data.cxlist_name,
            now_name:data.now_name,
        }
        softwaredata(params)
         .then(res => {
			console.log(res);
            console.log(res.status,123);
            if (res.status == 200) {
                data.softwarelist = res.data.data
                console.log(data.softwarelist);
                // console.log(data.softwarelist);
            } else if (res.status !== 200) {
                data.dataText = "暂无数据";
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })


};


let datas = {
	action:'apiindex',
    pageIndex: 1,//当前页数，支持 .sync 修饰符	 number
	pageSize: 10//每页显示条目个数，支持 .sync 修饰符 number
};


// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	name: '',
	address: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.name = row.name;
	form.address = row.address;
	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	// data.historyData.value[idx].name = form.name;
	// data.historyData.value[idx].address = form.address;
};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
